import React from 'react';
import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Sider } = Layout;
const items1 = [
  {
    key: '1',
    label: '首页',
  },
  {
    key: '2',
    label: '产品',
  },
  {
    key: '3',
    label: '关于我们',
  }
];
const items2 = [
  {
    key: 'sub1',
    icon: React.createElement(UserOutlined),
    label: '图片管理',
    children: [
      {
        key: '1',
        label: '图片列表',
        path: '/image/list',
      },
      {
        key: '2',
        label: '用户分析',
        path: '/image/analysis',
      },
      {
        key: '3',
        label: '用户设置',
        path: '/image/settings',
      },
    ],
  },
  {
    key: 'sub2',
    icon: React.createElement(LaptopOutlined),
    label: '系统设置',
    children: [
      {
        key: '4',
        label: '基础配置',
        path: '/system/basic',
      },
      {
        key: '5',
        label: '安全设置',
        path: '/system/security',
      },
      {
        key: '6',
        label: '权限管理',
        path: '/system/permission',
      },
    ],
  },
  {
    key: 'sub3',
    icon: React.createElement(NotificationOutlined),
    label: '消息中心',
    children: [
      {
        key: '7',
        label: '通知公告',
      },
      {
        key: '8',
        label: '消息提醒',
      },
      {
        key: '9',
        label: '系统消息',
      },
    ],
  },
];
const App = () => {
  const navigate = useNavigate();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const handleMenuClick = (item) => {
    const findMenuItem = (items) => {
      for (const menuItem of items) {
        if (menuItem.children) {
          const found = findMenuItem(menuItem.children);
          if (found) return found;
        }
        if (menuItem.key === item.key) return menuItem;
      }
      return null;
    };

    const menuItem = findMenuItem(items2);
    if (menuItem && menuItem.path) {
      navigate(menuItem.path);
    }
  };

  return (
    <Layout>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items1}
          style={{
            flex: 1,
            minWidth: 0,
          }}
        />
      </Header>
      <Layout>
        <Sider
          width={200}
          style={{
            background: colorBgContainer,
          }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{
              height: '92vh',
              borderRight: 0,
            }}
            items={items2}
            onClick={handleMenuClick}
          />
        </Sider>
        <Layout
          style={{
            padding: '0 24px 24px',
          }}
        >
          <Breadcrumb
            items={[
              {
                title: 'Home',
              },
              {
                title: 'List',
              },
              {
                title: 'App',
              },
            ]}
            style={{
              margin: '16px 0',
            }}
          />
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
export default App;